<template>
  <div class="pd-20">
    <el-select v-model="queryData.companyIds"
               clearable
               filterable
               multiple
               @change="handleOption('select')"
               placeholder="所属公司">
      <el-option v-for="item in companyList"
                 :key="item.id"
                 :label="item.name"
                 :value="item.id">
      </el-option>
    </el-select>

    <el-input v-model="queryData.searchCondition"
              placeholder="套餐名称"
              clearable
              @clear="handleOption('select')"
              class="w-200"/>
    <el-select v-model="queryData.type"
               clearable
               filterable
               @change="handleOption('select')"
               placeholder="套餐包类型">
      <el-option v-for="item in packageTypeList"
                 :key="item.status"
                 :label="item.name"
                 :value="item.status">
      </el-option>
    </el-select>

    <el-button type="primary"
               @click="handleOption('select')">查询
    </el-button>
    <element-table class="mt-20"
                   :columns="columns"
                   :data="tableData"
                   v-loading="loading"
                   pager
                   :pageTotal="pageTotal"
                   :pageIndex="pageIndex"
                   :pageSize="pageSize"
                   @handleChangePage="handleChangePage">

      <template v-slot:option="{row}">
        <el-button type="primary"
                   @click="handleOption('detail', row)">详情
        </el-button>
      </template>
    </element-table>

    <el-dialog :visible.sync="showDetailDialog"
               title="详情"
               width="70%"
               :close-on-click-modal="false"
               :close-on-press-escape="false">
      <el-form :model="detailData"
               label-position="right"
               label-width="180px">
        <el-form-item label="套餐包名称:" required>
          <el-input class="w-200" :value="detailData.name" disabled/>

        </el-form-item>
        <el-form-item label="套餐包类型:" required>
          <el-input class="w-200" :value="filterType(detailData.type)" disabled/>
        </el-form-item>
        <el-form-item label="套餐包针对病种:" required>
          <el-input class="w-200" :value="detailData.themeDiseaseName" disabled/>
        </el-form-item>
        <el-form-item label="套餐包包含药量及用量:" required>
        </el-form-item>

        <el-form-item>
          <element-table
            :columns="columnsDetail"
            :data="detailData.chronicDiseasePackageDrugs">
          </element-table>
        </el-form-item>

        <el-form-item label="套餐包售价:" required>
          <el-input class="w-200" :value="detailData.price" disabled>
            <el-button slot="append">元</el-button>
          </el-input>
        </el-form-item>
        <el-form-item label="套餐包有效期:" required>
          <el-input class="w-200" :value="formatterDate(detailData.validityBeginTime)" disabled/>
        </el-form-item>
        <el-form-item label="签约及服务奖励:" required>
          <el-input class="w-200" :value="detailData.signReward" disabled>
            <el-button slot="append">元</el-button>
          </el-input>
        </el-form-item>
        <el-form-item label="续签奖励:" required>
          <el-input class="w-200" :value="detailData.renewalReward" disabled>
            <el-button slot="append">元</el-button>
          </el-input>
        </el-form-item>
        <el-form-item label="天下医生产品配置:" v-if="detailData.familyDoctorStatus==1||detailData.privateDoctorStatus==1">
          <el-tag v-if="detailData.familyDoctorStatus==1">家庭医生包</el-tag>
          <el-tag v-if="detailData.privateDoctorStatus==1">私人医生包</el-tag>
        </el-form-item>

      </el-form>
      <p align="center">
        <el-button @click="showDetailDialog=false"
                   type="info">返回
        </el-button>
      </p>

    </el-dialog>
  </div>
</template>

<script>
import ElementTable from '@/base/ElementTable'

export default {
  name: "index",
  data() {
    return {
      queryData: {
        companyIds: [],
        searchCondition: '',
        type: ''
      },
      companyList: [],
      packageTypeList: [
        {name: '个人类-特价T配', status: 1},
        {name: '个人类-精品U选', status: 2},
        {name: '家庭类-特价T配', status: 3},
        {name: '家庭类-精品U选', status: 4},
      ],
      showDetailDialog: false,
      loading: false,
      pageTotal: 0,
      pageSize: 20,
      pageIndex: 1,
      tableData: [],
      detailData: {
        chronicDiseasePackageDrugs: [],
        famousDoctorImg: ''
      },

      columnsDetail: [
        {
          label: '药品名称',
          prop: 'chronicDiseasePackageCompanyDrug.name',
          align: "center",
        }, {
          label: '货号',
          prop: 'chronicDiseasePackageCompanyDrug.productCode',
          align: "center",
        }, {
          label: '规格',
          prop: 'chronicDiseasePackageCompanyDrug.standard',
          align: "center",
        }, {
          label: '单位',
          prop: 'chronicDiseasePackageCompanyDrug.unit',
          align: "center",
        }, {
          label: '厂家',
          prop: 'chronicDiseasePackageCompanyDrug.factoryName',
          align: "center",
        },
        {
          label: '零售价',
          prop: 'chronicDiseasePackageCompanyDrug.price',
          align: "center",
        }, {
          label: '折后价',
          prop: 'chronicDiseasePackageCompanyDrug.discountPrice',
          align: "center",
        }, {
          label: '每月用量',
          prop: 'needUseAmount',
          align: "center",
        }
      ],
      columns: [
        {
          label: '所属公司',
          prop: 'companyName',
          align: "center",
          width: 200
        }, {
          label: '套餐名称',
          prop: 'name',
          align: "center"
        }, {
          label: '所属类别',
          prop: 'type',
          align: "center",
          formatter: (row, cellValue) => {
            return this.filterType(row.type)
          },
        }, {
          label: '有效状态',
          prop: 'status',
          align: "center",
          formatter: (row, cellValue) => {
            switch (row.status) {
              case 0:
                return '待审核'
                break
              case 1:
                return '有效'
                break
              case 2:
                return '下架'
                break
              case 3:
                return '已失效'
                break
              case -1:
                return '未通过'
                break
            }
          },
        }, {
          label: '针对病种',
          prop: 'themeDiseaseName',
          align: "center"
        }, {
          label: '套餐总价/每月',
          prop: 'price',
          align: "center"
        }, {
          label: '签约及服务奖励',
          prop: 'signReward',
          align: "center"
        }, {
          label: '续约奖励',
          prop: 'renewalReward',
          align: "center"
        }, {
          label: '累计销售（人/月）',
          prop: 'totalPrice',
          align: "center"
        }, {
          label: '有效期',
          prop: 'validityBeginTime',
          align: "center",
          formatter: (row, cellValue) => {
            if (row.validityBeginTime && row.validityEndTime) {
              return this.formatterDate(row.validityBeginTime) + '至' + this.formatterDate(row.validityEndTime)
            } else {
              return ''
            }

          },

        }, {
          label: '操作',
          prop: 'option',
          align: 'center',
          isSlot: true,
          width: 200
        }
      ],
      rules: {
        name: [
          {required: true, message: '请输入一级药品名称'}
        ]
      }

    }
  },
  created() {
    this.getCompanyList()
    this.getList()
  },
  components: {
    'element-table': ElementTable
  },
  methods: {
    //查询公司
    getCompanyList() {
      this.post(this.api.company.companyList, {
        name: '',
        status: 1,
        pageIndex: 0,
        pageSize: 200
      }).then((res) => {
        if (res.data.code === '200') {
          this.companyList = res.data.object
        }
      })
    },
    //查询列表
    getList() {
      this.loading = true
      this.post(this.api.slowDisease.getAdminPackageList, {
        pageSize: this.pageSize,
        pageIndex: this.pageIndex - 1,
        operationType: 5,
        ...this.queryData
      }).then((res) => {
        this.loading = false
        if (res.data.code === '200') {
          this.tableData = res.data.object
          this.pageTotal = res.data.totalNum;
        }
      })
    },
    async handleOption(op, row) {
      switch (op) {
        case 'select':
          this.pageIndex = 1
          this.getList()
          break
        case 'detail':
          this.detailData = null
          this.showDetailDialog = true
          this.post(this.api.slowDisease.getAdminPackageDetail, {
            id: row.id
          }).then((res) => {
            this.detailData = res.data.object
            this.$set(this.detailData, 'authStatus', this.detailData.status)
          })
          break;

      }
    },
    handleAddClassify() {
      this.submitData.list.push({
        name: this.submitData.secondName
      })
    },
    handleDelClassify(index) {
      this.submitData.list.splice(comboStatisticsList, 1)
    },
    // 时间转换
    formatterDate(time) {
      if (time)
        return this.commonFunction.timestampFormat(new Date(time), 'yyyy-MM-dd')
      else
        return ''
    },
    filterType(type) {
      switch (type) {
        case 1:
          return '个人类-特价T配'
          break
        case 2:
          return '个人类-精品U选'
          break
        case 3:
          return '家庭类-特价T配'
          break
        case 4:
          return '家庭类-精品U选'
          break
      }
    },
    // 分页
    handleChangePage(page) {
      this.pageIndex = page;
      this.getList();
    },
  }
}
</script>

<style scoped>

</style>
